<template>
  <div>
    <div class="common-tab-box">
      <div :class="{ active: tab === 1 }" @click="tab = 1">人口</div>
      <div :class="{ active: tab === 2 }" @click="tab = 2">房屋</div>
      <div :class="{ active: tab === 3 }" @click="tab = 3">组织</div>
    </div>
    <div class="bottominfor">
      <div class="peopleinfor" v-show="tab === 1">
        <div class="toppeoplecount">
          <div class="lefttext">
            <div class="lefticon"></div>
            <div class="mideletext">{{peopleInfor.field_name}}</div>
          </div>
          <div class="rightnum"><span>{{peopleInfor.field_value}}</span>{{peopleInfor.unit}}</div>
        </div>
        <div class="others">
          <div
            class="otheritem"
            v-for="(item, index) in peopleOtherList"
            :key="index"
          >
            <div class="othername">{{item.field_name}}</div>
            <div class="othernumbers">
              <span class="othernum">{{item.field_value}}</span>{{item.unit}}
            </div>
            <div class="otheritembg"></div>
          </div>
        </div>
      </div>
      <div class="leftInfor" v-show="tab === 2 || tab === 3">
        <div class="houseleft">
          <div class="lefttitle">{{leftInfor.field_name}}</div>
          <p class="housearea">{{leftInfor.field_value}}</p>
          <p class="houseunit">{{leftInfor.unit}}</p>
        </div>
        <div class="righthousechart">
          <div class="mychart" ref="myChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { postAction, getAction } from '@/api/manage.js'

export default {
  data() {
    return {
      tab: 1,
      myChart: null,
      colors: [
        'hsla(213, 96%, 61%, 1)',
        'hsla(27, 100%, 70%, 1)',
        'hsla(162, 74%, 56%, 1)',
        'hsla(21, 100%, 74%, 1)',
        'hsla(185, 69%, 68%, 1)',
        'hsla(263, 97%, 76%, 1)'
      ],
      chartData: [
        { id: 1, type: '楼房', num: 11 },
        { id: 2, type: '平房', num: 21 },
        { id: 3, type: '公租房', num: 31 },
        { id: 4, type: '其他', num: 41 }
      ],
      chartData2: [
        { id: 1, type: '非公经济组织', num: 11 },
        { id: 2, type: '社会组织', num: 21 },
        { id: 3, type: '其他', num: 41 }
      ],
      peopleInfor: {},
      peopleOtherList: [],
      leftInfor: {},
      houseChartData: [],
      organizationChartData: []
    }
  },
  watch: {
    tab() {
      this.myChart?.dispose()
      this.myChart = null
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      getAction('/topic/data/listAllBySql/dy_dp_shzl_shxx_gk', { count_type: this.tab === 1 ? '人口' : this.tab === 2 ? '房屋' : this.tab === 3 ? '组织' : '', data_type: '总计' }).then(res => {
        if (res.result) {
          if (this.tab === 1) {
            this.peopleInfor = res.result[0]
          } else if (this.tab === 2 || this.tab === 3) {
            this.leftInfor = res.result[0]
          }
        }
      })
      getAction('/topic/data/listAllBySql/dy_dp_shzl_shxx_gk', { count_type: this.tab === 1 ? '人口' : this.tab === 2 ? '房屋' : this.tab === 3 ? '组织' : '', data_type: '各项' }).then(res => {
        if (res.result) {
          if (this.tab === 1) {
            this.peopleOtherList = res.result
          } else if (this.tab === 2) {
            this.houseChartData = res.result
          } else if (this.tab === 3) {
            this.organizationChartData = res.result
          }
        }
      })
      if (this.tab === 2 || this.tab === 3) {
        const that = this
        setTimeout(() => {
          that.initCharts()
        }, 200)
      }
    },
    initCharts() {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      let chartData = []
      if (this.tab === 2) {
        this.houseChartData.forEach((item) => {
          chartData.push({
            name: item.field_name,
            value: item.field_value
          })
        })
      } else if (this.tab === 3) {
        this.organizationChartData.forEach((item) => {
          chartData.push({
            name: item.field_name,
            value: item.field_value
          })
        })
      }

      let option = {
        tooltip: {
          trigger: 'item',
          valueFormatter: (value) => `${value}` + (this.tab === 3 ? '万户' : '万套')
        },
        color: this.colors,
        legend: {
          show: true,
          x: 'center',
          y: 'bottom',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '60%'],
            center: ['50%', '45%'],
            avoidLabelOverlap: false, // 是否开启标签避免重叠
            label: {
              color: '#fff',
              alignTo: 'labelLine',
              formatter: '{b}：\n{d}%'
            },
            labelLine: {
              length: 10,
              length2: 10
            },
            data: chartData
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.bottominfor {
  width: 100%;
  .peopleinfor {
    width: 100%;
    .toppeoplecount {
      width: 355px;
      margin: 0 auto;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px;
      box-sizing: border-box;
      font-family: MicrosoftYaHei, MicrosoftYaHei;
      font-size: 16px;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
      background: url("../../images/peoplebg.png") no-repeat bottom;
      background-size: 100% 37px;
      .lefttext {
        display: flex;
        align-items: center;
        font-weight: bold;
        .lefticon {
          width: 61px;
          height: 57px;
          margin-right: 20px;
          background: url("../../images/peopleicon.png") no-repeat center;
          background-size: 100% 100%;
        }
      }
      .rightnum {
        display: flex;
        align-items: center;
        span {
          font-family: YouSheBiaoTiHei;
          font-size: 24px;
          color: #ffde00;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
      }
    }
    .others {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      .otheritem {
        width: 154px;
        text-align: center;
        position: relative;
        margin-bottom: 20px;
        &:nth-child(odd) {
          margin-right: 30px;
        }
        &:nth-child(3) {
          margin-bottom: 0px;
        }
        &:nth-child(4) {
          margin-bottom: 0px;
        }
        .othername {
          font-family: MicrosoftYaHei;
          font-size: 16px;
          color: #ffffff;
          text-align: center;
          font-style: normal;
          text-transform: none;
        }
        .othernumbers {
          font-family: MicrosoftYaHei;
          font-size: 14px;
          color: #ffffff;
          line-height: 28px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          .othernum {
            font-family: YouSheBiaoTiHei;
            font-size: 24px;
            color: #ffde00;
            text-align: center;
            font-style: normal;
            text-transform: none;
          }
        }
        .otheritembg {
          width: 154px;
          height: 38px;
          background: url("../../images/peopleotherbg.png") no-repeat center;
          background-size: 100% 100%;
          position: absolute;
          bottom: -10px;
          left: 0;
        }
      }
    }
  }
  .leftInfor {
    width: 100%;
    height: 210px;
    display: flex;
    align-items: center;
    .houseleft {
      width: 120px;
      text-align: center;
      font-size: 16px;
      color: #ffffff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .lefttitle {
        font-weight: bold;
        margin-bottom: 10px;
      }
      .housearea {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #ffde00;
        text-align: center;
        font-style: normal;
        text-transform: none;
        margin-bottom: 10px;
      }
    }
    .righthousechart {
      width: 305px;
      height: 205px;
      .mychart {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
